<template>
  <div class="com-container">
    <div class="title" :style="comStyle">
      <span>{{ '▎  ' + showTitle}}</span>
      <span class="iconfont title-icon" :style="comStyle" @click="showChoice = !showChoice">&#xe6eb;</span>
      <div class="select-con" v-show='showChoice' :style='marginStyle'>
        <div class="select-item" v-for="item in selectTypes" :key="item.key" @click="haldleSelect(item.key)">
          {{item.text}}
        </div>
      </div>
    </div>
    <div class="com-chart" ref='trend_ref'></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {getThemeValue} from '@/utils/theme_utils'
export default {
  data() {
    return {
      chartInstance:null, //图表实例
      allData:null, //保存请求到的数据
      showChoice:false, //控制标题选项的显示与隐藏
      choiceType:'map', //当前显示的数据
      titleFontSize:0   //标题文字大小
    }
  },
  created() {
    //在组件创建的时候进行webSocket回调函数的注册
    this.$socket.registerCallBack('trendData',this.getData)
  },
  mounted() {
    this.initChart()
    // this.getData()
    //使用websocket发送给服务器
    this.$socket.send({
      action:'getData',
      socketType:'trendData',
      chartName:'trend',
      value:''
    })
    window.addEventListener('resize',this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize',this.screenAdapter)
    //在组件销毁的时候进行webSocket回调函数的取消
    this.$socket.unRegisterCallBack('trendData')
  },
  computed:{
    ...mapState(['theme']),
    selectTypes(){
      if(!this.allData){
        return []
      }else{
        return this.allData.type.filter(item=>{
          return item.key != this.choiceType
        })
      }
    },
    showTitle(){
      if(!this.allData){
        return ''
      }else{
        return this.allData[this.choiceType].title
      }
    },
    // 计算标题文字大小
    comStyle(){
      return {
        fontSize:this.titleFontSize + 'px',
        color: getThemeValue(this.theme).titleColor,
        fontWeight:'bold'
      }
    },
    marginStyle(){
      return{
        marginLeft:this.titleFontSize + 'px'
      }
    }
  },
  watch:{
        theme(){
            this.chartInstance.dispose()  //销毁图表
            this.initChart()  //以最新的主题初始化图表
            this.screenAdapter()  //重新适配屏幕
            this.updateChart()  //更新数据
        }
    },
  methods: {
    initChart(){
      this.chartInstance = this.$echarts.init(this.$refs.trend_ref,this.theme)
      const initOption = {
        grid:{
          left:'3%',
          right:'4%',
          top:'35%',
          bottom:'1%',
          containLabel:true
        },
        tooltip:{
          trigger:'axis'
        },
        legend:{
          left:20,
          top:'20%',
          icon:'circle'
        },
        xAxis:{
          type:'category',
          boundaryGap:false
        },
        yAxis:{
          type:'value'
        }
      }
      this.chartInstance.setOption(initOption)
    },
    getData(ret){ // ret:服务端发送给客户端的数据
      // let {data:ret} = await this.$http.get('trend')
      this.allData = ret
      this.updateChart()
    },
    updateChart(){
      //半透明颜色
      const colorArr1 = [
        'rgba(11,168,44,0.5)',
        'rgba(44,110,255,0.5)',
        'rgba(22,242,217,0.5)',
        'rgba(254,33,30,0.5)',
        'rgba(250,105,0,0.5)',
      ]
      // 全透明颜色
      const colorArr2 = [
        'rgba(11,168,44,0)',
        'rgba(44,110,255,0)',
        'rgba(22,242,217,0)',
        'rgba(254,33,30,0)',
        'rgba(250,105,0,0)',
      ]
      //处理数据
      //类目轴的数据
      let timeArr = this.allData.common.month
      // y轴的数据
      let valueArr = this.allData[this.choiceType].data
      let seriesArr = valueArr.map((item,index)=>{
        return{
          name:item.name,
          type:'line',
          data: item.data,
          stack:this.choiceType,
          areaStyle:{
            //填充颜色渐变
            color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[
              {
                offset:0,
                color:colorArr1[index]
              },
              {
                offset:1,
                color:colorArr2[index]
              }
            ])
          }
        }
      })
      let legendArr = valueArr.map(item=>{
        return item.name
      })
      const dataOption = {
        xAxis:{
          data:timeArr
        },
        legend:{
          data:legendArr
        },
        series:seriesArr
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter(){
      this.titleFontSize = this.$refs.trend_ref.offsetWidth  / 100 * 3.6
      const adapterOption = {
        legend:{
          itemWidth:this.titleFontSize,
          itemHeight:this.titleFontSize,
          itemGap:this.titleFontSize,
          textStyle:{
            fontSize:this.titleFontSize / 2
          }
        }
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
    haldleSelect(currentType){
      this.choiceType = currentType
      this.updateChart()
      this.showChoice = false
    }
  },
}
</script>

<style lang='less' scoped>
.title{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  color: white;
  .title-icon{
    margin-left: 10px;
    cursor: pointer;
  }
  .select-con{
    background-color: #222733;
  }
}

</style>